<template>
  <div class="app-container">
    <el-form :inline="true" class="search-wrap">
      <el-row :gutter="4">
        <el-col :span="8">
          <el-form-item label="关键词">
            <el-input v-model="q.keyWord" placeholder="关键词" @keyup.enter.native="load"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="warning" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="default" icon="el-icon-refresh" @click="resetSeach">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="filter-container">
      <el-button v-permission="['Admin.RBAC.Role.Manage.Create']" class="filter-item" type="primary" icon="el-icon-plus" @click="showEditRoleDialog()">添加</el-button>
    </div>
    <el-table :key="tableKey" v-loading="tableLoading" :data="items" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column :label="'角色名称'" prop="name" width="150" ></el-table-column>
      <el-table-column :label="'ID'" prop="id" width="280" ></el-table-column>
      <el-table-column :label="'角色描述'" prop="remark" min-width="150" ></el-table-column>
      <!-- <el-table-column :label="'角色显示名称'" prop="displayName" width="150" align="center"></el-table-column> -->
      <!-- <el-table-column :label="'角色属性'" width="200" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isStatic" title="系统角色不可删除" type="danger">系统</el-tag>
          <el-tag v-if="scope.row.isDefault" title="添加用户自动赋予用户该角色">默认</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column :label="'创建时间'" prop="creationTime" sortable="custom" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.creationTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="{ row }">
          <el-button v-permission="['Admin.RBAC.Role.Manage.Edit']" type="text" @click="showEditRoleDialog(row.id)">编辑</el-button>
          <el-divider v-permission="['Admin.RBAC.Role.Manage.Edit']" direction="vertical"/>
          <el-button v-permission="['Admin.RBAC.Role.Manage.Permission']" type="text" @click="showChangePermissionsDialog(row.id)">分配权限</el-button>
          <el-divider v-permission="['Admin.RBAC.Role.Manage.Permission']" direction="vertical"/>
          <el-button v-permission="['Admin.RBAC.Role.Manage.Delete']" type="text" @click="deleteData(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.pageNumber" :page-size.sync="q.pageSize" @pagination="getList"/>

    <edit-role-dialog ref="editRoleDialog" @save="load()"></edit-role-dialog>
    <change-permissions-dialog ref="changePermissionsDialog"></change-permissions-dialog>
  </div>
</template>

<script>
import { getRolePagingList, deleteRole } from "@/api/role";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import ChangePermissionsDialog from "./components/ChangePermissionsDialog";
import EditRoleDialog from "./components/EditRoleDialog";

export default {
  name: "RoleList",
  components: {
    pagination: Pagination,
    "change-permissions-dialog": ChangePermissionsDialog,
    "edit-role-dialog": EditRoleDialog
  },
  data() {
    return {
      q: {
        keyWord: undefined,
        sorting: "id",
        pageNumber: 1,
        pageSize: 10
      },
      totalCount: 0,
      items: [],
      tableLoading: true,
      tableKey: 0
    };
  },
  created() {
    this.load();
  },
  methods: {
    resetSeach() {
      this.q = {
        keyWord: undefined,
        sorting: "id",
        pageNumber: 1,
        pageSize: 10
      };
      this.load();
    },
    load() {
      this.q.pageNumber = 1;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      getRolePagingList(this.q).then(result => {
        this.items = result.fieldList;
        this.totalCount = result.totalRow;
        this.tableLoading = false;
      });
    },
    sortChange(sortData) {
      const { prop, order } = sortData;
      if (prop && order === "descending") {
        this.q.sorting = prop + " desc";
      } else if (prop && order === "ascending") {
        this.q.sorting = prop;
      } else {
        this.q.sorting = "id";
      }
      this.load();
    },
    deleteData(id) {
      this.$confirm("删除后不可恢复， 是否继续?", "确定删除选中的角色吗？", { type: "warning" })
        .then(() => {
          deleteRole(id).then(() => {
            this.load();
            this.$message({ message: "删除成功", type: "success" });
          });
        })
        .catch(() => {});
    },
    showChangePermissionsDialog(id) {
      this.$refs["changePermissionsDialog"].show(id);
    },
    showEditRoleDialog(id) {
      this.$refs["editRoleDialog"].show(id);
    }
  }
};
</script>

